<template>
    <div class="w-100vw history">
        <div class="flex history-tablist w-375 text-12px overflow-x-scroll">
            <div class="nav-item" @click="showDescriptionPop = true">Game description</div>
            <div class="nav-item">Bet Today</div>
            <div class="nav-item" @click="showRecentPop = true">Lottery results</div>
            <div class="nav-item">Sum size</div>
            <div class="nav-item">Sum is Odd/Even</div>
        </div>
        <div class="flex history-list w-375 text-12px overflow-x-scroll">
            <div v-for="i in resuleList">
                <div v-for="item in i">
                    <div class="l-item">{{ item }}</div>
                </div>
            </div>
        </div>
    </div>
    <GameDescriptionPop @closed="showDescriptionPop = false" :show="showDescriptionPop" />
    <RecentPop @closed="showRecentPop = false" :show="showRecentPop" />
</template>
  
<script setup lang="ts">
import GameDescriptionPop from "./gameDescriptionPop.vue"
import RecentPop from "./recentPop.vue"

const showDescriptionPop = ref(false)
const showRecentPop = ref(false)

const resuleList = [['b', 'b', 'b', 'b', 'b'], ['b', 'b', 'b', 'b', 'b'], ['b', 'b', 'b'], ['b'], ['b', 'b', 'b', 'b', 'b']]
</script>
  
<style lang="less" scoped>
.nav-item {
    display: inline-block;
    margin: 0 15px;
    padding: 15px 0;
    white-space: nowrap;
    cursor: pointer;
}

.history-tablist {
    color: rgba(182, 117, 255, .6);
}

.l-item {
    width: 24px;
    height: 24px;
    line-height: 22px;
    margin: 2px;
    font-size: 16px;
    text-align: center;
    border: 2px solid #bcbfcb;
    border-radius: 50%;
}
</style>
  